<!DOCTYPE html>
<html
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layout}">

<head>
    <title>Cluster Configuration</title>
</head>

<body>
<section layout:fragment="content">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <i class="fa fa-align-justify"></i>
                        Kafka Clusters
                        <div class="btn-group float-right" role="group" aria-label="Button group">
                            <a class="btn" href="/configuration/cluster/create" style="padding-bottom: 0;">
                                <i class="icon-settings"></i>
                                &nbsp;Create new
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered table-striped table-sm">
                            <thead>
                            <tr>
                                <th>Cluster Name</th>
                                <th>Brokers</th>
                                <th>SSL Enabled</th>
                                <th>Status</th>
                                <th class="text-right">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr th:if="${clusterList.isEmpty()}" align="center">
                                    <td colspan="5">
                                        No clusters found!
                                    </td>
                                </tr>
                                <tr th:each="cluster : ${clusterList}">
                                    <td th:text="${cluster.name}"></td>
                                    <td th:text="${cluster.brokerHosts}"></td>
                                    <td>
                                        <span
                                            th:if="${cluster.isSslEnabled()}"
                                            class="badge badge-success">Yes
                                        </span>
                                        <span
                                            th:if="!${cluster.isSslEnabled()}"
                                            class="badge badge-danger">No
                                        </span>
                                    </td>
                                    <td>
                                        <span
                                            th:if="${cluster.isValid()}"
                                            class="badge badge-success">Validated
                                        </span>
                                        <span
                                            th:if="!${cluster.isValid()}"
                                            class="badge badge-danger">Untested
                                        </span>
                                    </td>
                                    <td class="text-right">
                                        <div class="dropdown">
                                            <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                Actions
                                            </button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                                <a class="dropdown-item" th:href="@{/configuration/cluster/test/{id}(id=${cluster.id})}">
                                                    <i class="fa fa-edit"></i>
                                                    Test
                                                </a>
                                                <a class="dropdown-item" th:href="@{/configuration/cluster/edit/{id}(id=${cluster.id})}">
                                                    <i class="fa fa-edit"></i>
                                                    Edit
                                                </a>
                                                <form th:action="@{/configuration/cluster/delete/{id}(id=${cluster.id})}" method="post">
                                                    <button class="dropdown-item" onclick="return confirm('Are you sure?');" type="submit">
                                                        <i class="fa fa-remove"></i>
                                                        Delete
                                                    </button>
                                                </form>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!--/.col-->
        </div>
    </div>
</section>

</body>
</html>